<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>随易租平台服务管理端</title>

    <link rel="shortcut icon" href="log.png">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>


    <link rel="stylesheet" href="styles/index.css"/>
    <link rel="stylesheet" href="styles/header.css"/>
    <link rel="stylesheet" href="styles/footer.css"/>
    <script src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="js/include.js"></script>

    <style>

        #app {
            width: 100%;
            overflow: hidden;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        #top {
            margin: 25px 10% 0 10%; /*上右下左*/

        }

    </style>

</head>

<body>
<div class="app" id="app">
    <!-- 头部 start-->
    <div class="head">
        <div class="header_wrap">
            <div class="bar_left">
                <span>
                    [<a href="http://47.113.219.131/rent/index.html" target="_blank" class="address">切换城市</a>

                    <span style="color: #807b7b">北海</span>]
                </span>
            </div>

            <div class="nav-channel-list">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                    <el-submenu index="1">
                        <template slot="title">用户中心</template>
                        <el-menu-item index="2-1">我的收藏</el-menu-item>
                        <el-menu-item index="2-2">订单管理</el-menu-item>
                        <el-menu-item index="2-3">浏览记录</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">商家中心</template>
                        <el-menu-item index="2-1">发布房子</el-menu-item>
                        <el-menu-item index="2-2">我的发布</el-menu-item>
                        <el-menu-item index="2-3">个人中心</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="7">
                        <a href="https://www.ele.me" target="_blank">个人中心</a>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="login">
                <a href="http://47.113.219.131/rent/index.html" target="_blank" class="user-login">登录</a>
                |
                <a href="http://47.113.219.131/rent/index.html" target="_blank" class="user-register">注册</a>
            </div>
        </div>
    </div>
    <div class="ui-header">
        <a href="" class="ui-logo"><img src="log.png" alt="" style="width: 200px;height: 90px"></a>
        <div class="ui-search">
            <span class="search-text">
            <el-input v-model="input" placeholder="小区名称、地址"></el-input>
            </span>

            <span class="search-btn">
                <span class="a-search-btn">搜索房源</span>
            </span>
        </div>
    </div>

    <!--轮播图-->
    <div id="top">
        <template>
            <el-carousel :interval="3000" type="card" height="300px">
                <el-carousel-item v-for="item in urls" :key="item">
                    <div class="block">
                        <!--                        <span class="demonstration">{{item}}</span>-->
                        <el-image class="el-image" :src="item">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </template>
    </div>


    <div class="ui-body">
        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple">

                    <img src="https://n.sinaimg.cn/sinacn09/49/w1494h955/20180404/b1cc-fysuuya3237627.jpg" alt="">

                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>

                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>

                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>

                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light">
                    <img src="https://n.sinaimg.cn/sinacn16/112/w1557h955/20180510/7270-haichqz7292785.jpg" alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"><img
                        src="https://p3.itc.cn/images01/20201104/599a9c327a6c4900943d081041bc7c17.jpeg" alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"><img
                        src="https://img.zx123.cn/Resources/zx123cn/uploadfile/2015/0915/bd210a113264a552d35bfac745a290b4.jpg"
                        alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="6">
                <div class="grid-content bg-purple"><img
                        src="https://t10.baidu.com/it/u=205449043,161130240&fm=30&app=106&f=JPEG?w=640&h=427&s=639B1BC768465ACA1CA4EC6703000013"
                        alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"><img
                        src="https://n.sinaimg.cn/sinacn08/267/w640h427/20180419/653a-fzihnep7240470.jpg" alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"><img
                        src="https://img.zx123.cn/Resources/zx123cn/uploadfile/2022/0725/thumb_288_20220725174909_73172.jpg"
                        alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple-light"><img
                        src="https://img.zx123.cn/Resources/zx123cn/uploadfile/2022/0722/thumb_288_20220722153752_89029.jpg"
                        alt="">
                    <div class="ui-title">
                        <span>北部湾一号</span>
                    </div>
                    <div class="ui-location">
                        <span>海城-中街-茶亭路49号</span>
                    </div>
                    <div class="ui-price">
                        <span>6939 元/月 </span>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
    <!-- 尾部 start-->
    <div id="footer"></div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>

<script>

    new Vue({
        el: '#app',
        data() {
            return {
                urls: [
                    // 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',

                    'https://n.sinaimg.cn/sinacn09/49/w1494h955/20180404/b1cc-fysuuya3237627.jpg',
                    'https://n.sinaimg.cn/sinacn16/112/w1557h955/20180510/7270-haichqz7292785.jpg',
                    'https://p3.itc.cn/images01/20201104/599a9c327a6c4900943d081041bc7c17.jpeg',
                    'https://img.zx123.cn/Resources/zx123cn/uploadfile/2015/0915/bd210a113264a552d35bfac745a290b4.jpg',
                    'https://file.moyublog.com/d/file/2021-02-20/f7af1be7e29949e0b15f716de382d393.jpg'
                ],
                activeIndex: '1',
                activeIndex2: '1',
                input: ''
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            }
        }
    })
</script>
</body>
</html>
